<template>
  <div class="goodsInfo-container">
      <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
        <div class="ball" v-show="flag" ref="ball"></div>
      </transition>
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swipe :list="lunboImages" :imgname="'src'" class="image" >
                        <img :src="lunboImages.src" alt="">
                    </swipe>
                </div>
            </div>
        </div>

        <div class="mui-card">
            <div class="mui-card-header">{{ goodsList.title }}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>市场价：<span class="old">&yen;{{ goodsList.market_price }}</span>销售价：<span class="new">&yen;{{ goodsList.sell_price }}</span></p>
                    <!-- <p> -->
                        购买数量：
                      <numberBox :max="goodsList.stock_quantity" @func="getChangedCount"></numberBox>
                    <!-- </p> -->
                    <p class="button">
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small"  @click="flag=!flag">加入购物车</mt-button>
                    </p>
                    
                </div>
            </div>
        </div>

        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货品：{{ goodsList.goods_no }}</p>
                    <p>库存情况：{{ goodsList.stock_quantity }}件</p>
                    <p>上架时间：{{ goodsList.add_time }}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain class="button" @click="getInformation">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain class="button" @click="goodsComment">商品评论</mt-button>  
            </div>
                 
        </div>
        
          
  </div>
</template>


<script>
import swipe from '../subcomponents/swipe.vue'
import numberBox from '../subcomponents/numberBox-goodsInfo.vue'
export default {
  created() {
    this.getGoodsInfo();
    this.getGoodsInfoLunBo();
  },
  props: ["id"],
  data() {
    return {
      goodsList: {},
      lunboImages: [],
      information:{},
      flag:false,
      selectedCount:1
    };
  },
  methods: {
    //获取商品列表详细信息
    async getGoodsInfo() {
      const { data } = await this.$http.get("/api/goods/getinfo/" + this.id);
      //   console.log(data.message)
      if (data.status === 0) {
        this.goodsList = data.message[0];
      }
    },
    //获取轮播图图片
    async getGoodsInfoLunBo() {
      const { data } = await this.$http.get("/api/getthumimages/" + this.id);
        // console.log(data.message)
      if (data.status === 0) {
        this.lunboImages = data.message;
      }
    },
    //获取图文列表
    getInformation(){
        this.$router.push('/index/goodsDescription/'+this.id)
    },
    //商品详情评论
    goodsComment(){
        this.$router.push('/index/goodsComment/'+this.id)
    },
    beforeEnter(el){
        el.style.transform="translate(0,0)";
    },
    enter(el,done){
        el.offsetWidth;
        // console.log(this.$refs.ball)
        const ballPosition=this.$refs.ball.getBoundingClientRect();
        // console.log(ballPosition)
        const badgePosition=document.getElementById('badge').getBoundingClientRect();
        // console.log(badagePosition)
        const x=badgePosition.left-ballPosition.left;
        // console.log(x)
        const y=badgePosition.top-ballPosition.top;
        el.style.transform="translate("+x+"px,"+y+"px)";
        el.style.transition="all 0.4s ease";
        done();
    },
    afterEnter(el){
        this.flag=!this.flag;
    },
    //获取到子组件中的数字框中的count
    getChangedCount(c){
        console.log('有人调用了父组件的函数')
        this.selectedCount=c
        console.log(this.selectedCount)
    }
  },
  components:{
      swipe,
      numberBox
  }
};
</script>

<style lang="scss" scoped>
.goodsInfo-container{
    position:relative;
    background-color:#eee;
    overflow: hidden;
}
.mui-card-footer{
    display:block;
}
.button{
    margin-top: 8px;
}
.mint-swipe-item{
    img{
        height:100%;
    }
}
.image{
    text-align: center;
}
.old{
    text-decoration: line-through;
     margin-right:15px;
}
.new{
   color:red;
   font-size:16px;
   font-weight:700;
}
.ball{
    position:absolute;
    top: 330px;
    left: 153px;
    z-index:500;
    width: 15px;
    height: 15px;
    background-color:red;
    border-radius:50%;
}
</style>
